<template>
	<view class="actGoods">
		<u-navbar :is-back="true">
			<view class="slot-wrap">
				<u-search
					placeholder="输入商品id/店铺名称"
					v-model="keyword"
					shape="square"
					:show-action="false"
					action-text="搜索"
					:animation="false"
					@search="getGoods()"
					@custom="getGoods()"
				></u-search>
				<text class="iconfont icon-search" style="font-size: 48rpx;margin-left: 10rpx;" @click="getGoods()"></text>
			</view>
		</u-navbar>
		<view class="container">
			<!-- 拒绝弹窗 -->
			<u-modal
				v-model="refuseshow"
				content="是否拒绝该商品？"
				:show-cancel-button="true"
				@cancel="closerefuse"
				@confirm="dorefuse"
				ref="uModal"
				:async-close="true"
			></u-modal>
			<!-- 佣金弹窗 -->
			<u-modal v-model="infoshow" :content="cominfos" @confirm="closerefuse"></u-modal>
			<!-- 通过商品 -->
			<u-modal
				v-model="passshow"
				content="非续单的同佣金商品请勿重复通过，否则会影响上单。是否确认通过该商品?"
				:show-cancel-button="true"
				@cancel="closerefuse"
				@confirm="dopass"
			></u-modal>
			<!-- 推广弹窗 -->
			<u-modal v-model="spreadshow" :content="spreadinfo" :show-cancel-button="true" confirm-text="复制" @cancel="closerefuse" @confirm="copy"></u-modal>
			<view class="goodsbox" v-if="auditList.length > 0">
				<view class="order" v-for="(res, index) in auditList" :key="index">
					<view class="top">
						<view class="left">
							<view class="store">{{ res.shopTitle }}</view>
						</view>
						<view
							class="right"
							:style="{
								color: res.auditStatus == 2 ? '#5080FF' : res.auditStatus == 3 ? '#999999' : '#FF452D'
							}"
						>
							{{ res.auditStatus == 2 ? '已通过' : res.auditStatus == 3 ? '已拒绝' : '待审核' }}
						</view>
					</view>
					<view class="item">
						<view class="left"><image :src="res.pictUrl" mode="aspectFill"></image></view>
						<view class="content">
							<view class="title u-line-2">{{ res.title }}</view>
							<view class="type u-flex u-row-between">
								<text>销量 {{ res.biz30day }}</text>
								<text>{{ res.startTime }} 至 {{ res.endTime }}</text>
							</view>
							<view class="price">
								<view class="price_left">
									<view class="oldprice u-m-r-8">
										{{ res.zkFinalPrice.toFixed(2) }}
										<!-- <text class="decimal">.{{ res.zkFinalPrice }}</text> -->
									</view>
									￥{{ res.couponZkFinalPrice.toFixed(2) }}
									<!-- <text class="decimal">.{{ res.couponZkFinalPrice }}</text> -->
								</view>
								<view class="price_right">
									<view class="cominfo u-m-r-8">
										佣金
										<text class="numinfo">{{ res.commissionRate }}</text>
										%
									</view>
									<view class="cominfo">
										服务费
										<text class="numinfo">{{ res.serviceRate }}</text>
										%
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btntype1" v-if="res.auditStatus == 1">
							<u-button
								:custom-style="{
									width: '116rpx',
									height: '60rpx',
									fontSize: '28rpx',
									padding: 0,
									margin: '10rpx 20rpx',
									borderStyle: 'solid',
									color: '#bbbbbb',
									borderColor: '#bbbbbb'
								}"
								:plain="true"
								@click="showrefuse(res, index)"
							>
								拒绝
							</u-button>
							<u-button
								:custom-style="{
									width: '116rpx',
									height: '60rpx',
									fontSize: '28rpx',
									padding: 0,
									margin: '10rpx 20rpx',
									borderStyle: 'solid',
									color: '#1bcb31',
									borderColor: '#1bcb31'
								}"
								:plain="true"
								@click="showcoms(res)"
							>
								佣金
							</u-button>
							<u-button
								:custom-style="{
									width: '116rpx',
									height: '60rpx',
									fontSize: '28rpx',
									padding: 0,
									margin: '10rpx 18rpx',
									borderStyle: 'solid',
									color: '#5080ff',
									borderColor: '#5080ff'
								}"
								:plain="true"
								@click="showpass(res, index)"
							>
								通过
							</u-button>
						</view>
						<view class="btn2" v-else-if="res.auditStatus == 2">
							<u-button
								:custom-style="{
									width: '180rpx',
									height: '60rpx',
									fontSize: '28rpx',
									padding: 0,
									margin: 0,
									borderStyle: 'solid',
									color: '#5080ff',
									borderColor: '#5080ff'
								}"
								:plain="true"
								@click="showspread(res)"
							>
								推广
							</u-button>
						</view>
						<view class="btn2" v-else>
							<u-button
								:custom-style="{
									width: '180rpx',
									height: '60rpx',
									fontSize: '28rpx',
									padding: 0,
									margin: 0,
									borderStyle: 'solid',
									color: '#bbbbbb',
									borderColor: '#bbbbbb'
								}"
								:plain="true"
							>
								已拒绝
							</u-button>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :margin-top="40" :margin-bottom="0" bg-color="transparent" />
			</view>
			<view class="nogoods" v-else>
				<u-image src="/static/image/auditgoods.png" :width="620" :height="380"></u-image>
				<view style="font-size: 40rpx; text-align: center;color: #787882;">
					搜索商品进行审核
				</view>
			</view>
			<u-back-top :scroll-top="scrollTop" :top="600"></u-back-top>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
export default {
	data() {
		return {
			page: 1,
			max_page: 1,
			status: 'loadmore',
			scrollTop: 0,
			eventId: '',
			keyword: '',
			auditList: [],
			refuseshow: false,
			infoshow: false,
			passshow: false,
			spreadshow: false,
			cominfos: '',
			spreadinfo: '666',
			activeitem: {},
		};
	},
	onLoad(options) {
		this.eventId = options.id; // 字符串转对象
		console.log(this.eventId);
		this.getGoods(1)
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = ++this.page;
		// if (this.max_page < this.page || this.max_page == this.page) {
		// 	this.status = 'nomore';
		// 	return false;
		// }
	
		this.getGoods(this.page);
	},
	methods: {
		getGoods(page) {
			if (this.eventId !== '') {
				console.log(this.keyword, this.eventId);
				this.$u.api
					.getexaminegoods({
						keyworld: this.keyword,
						eventId: this.eventId,
						page:page,
						pagesize:15
					})
					.then(res => {
						if (res.data.status == 1) {
							// console.log('获取待审核列表', res.data.goods);
							if (res.data.goods.length > 0) {
								// this.auditList = res.data.goods;
								let arr = res.data.goods;
								for (let i in arr) {
									arr[i].startTime = arr[i].startTime.slice(5, arr[i].startTime.length);
									arr[i].endTime = arr[i].endTime.slice(5, arr[i].endTime.length);
								}
								this.page = parseInt(res.data.page);
								this.auditList.push(...arr);
								console.log(this.auditList);
							} else {
								this.$refs.uToast.show({
									title: 'Sorry!暂无商品!',
									type: 'info'
								});
							}
						} else {
							this.$refs.uToast.show({
								title: '查询繁忙,请稍后再试!',
								type: 'warning'
							});
						}
					})
					.catch(err => {
						// console.log(err);
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error'
						});
					});
			} else {
				this.$refs.uToast.show({
					title: '请重新选择活动',
					type: 'warning'
				});
			}
		},
		// 拒绝弹窗
		showrefuse(val, k) {
			this.activeitem = val;
			this.activeitem.key = k;
			this.refuseshow = true;
		},
		// 关闭弹窗
		closerefuse() {
			this.activeitem = {};
			this.refuseshow = false;
			this.passshow = false;
			this.spreadshow = false;
			this.infoshow = false;
		},
		// 确认拒绝
		dorefuse() {
			this.doauditgoods(3, this.activeitem.itemId);
		},
		// 佣金弹窗
		showcoms(val) {
			// console.log(val);
			this.$u.api
				.getGoodsRate({
					goods_id: val.itemId
				})
				.then(res => {
					console.log(res);
					this.cominfos = '当前商品佣金比例为' + res.data.commission_rate + '%';
					this.infoshow = true;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 打开通过弹窗
		showpass(val, k) {
			console.log(val)
			this.activeitem = val;
			this.activeitem.key = k;
			this.passshow = true;
		},
		dopass() {
			this.doauditgoods(2, this.activeitem.itemId);
		},
		// 推广弹窗
		showspread(val) {
			console.log(val);
			this.spreadinfo = '商品链接：' + val.auctionUrl;
			this.spreadshow = true;
		},
		// 审核商品(2通过 3拒绝)
		doauditgoods(status, itemid) {
			// console.log(this.eventId)
			this.$u.api
				.doauditgoods({
					activity_id: this.eventId,
					status: status,
					item_id: itemid
				})
				.then(res => {
					console.log(res);
					if (res.code == 200) {
						this.auditList[this.activeitem.key].auditStatus = status;
						this.closerefuse();
						this.$refs.uToast.show({
							title: '操作成功！',
							type: 'success'
						});
					}
				})
				.catch(err => {
					console.log(err);
					this.closerefuse();
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error'
					});
				});
		},
		copy() {
			uniCopy({
				content: this.spreadinfo,
				success: res => {
					uni.showToast({
						title: res,
						icon: 'none'
					});
					this.spreadshow = false;
				},
				error: e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 3000
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.actGoods {
	background-color: rgb(244, 244, 244);
	min-height: 100vh;
}
.container {
	padding: 0 28rpx;
	font-size: 32rpx;
	background-color: rgb(244, 244, 244);
}

.slot-wrap {
	display: flex;
	align-items: center;
	/* 如果您想让slot内容占满整个导航栏的宽度 */
	flex: 1;
	/* 如果您想让slot内容与导航栏左右有空隙 */
	padding: 0 30rpx 0 0;
}

.order {
	width: 672rpx;
	background-color: #ffffff;
	margin: 24rpx auto;
	border-radius: 16rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;

	.top {
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;

			.store {
				margin: 0 10rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.right {
			color: $u-type-warning-dark;
		}
	}

	.item {
		display: flex;
		margin: 18rpx 0 0;

		.left {
			margin-right: 20rpx;

			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 12rpx;
			}
		}

		.content {
			width: 462rpx;

			.title {
				// width: 462rpx;
				font-size: 28rpx;
				// line-height: 50rpx;
			}

			.type {
				margin: 8rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}

			.price {
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.oldprice {
					text-decoration: line-through;
					color: rgba(153, 153, 153, 1);
				}

				.price_left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}

				.price_right {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

					// width: 260rpx;
					.cominfo {
						color: rgba(153, 153, 153, 1);

						.numinfo {
							color: #333333;
						}
					}
				}
			}
		}
	}

	.bottom {
		margin-top: 18rpx;

		.btntype1 {
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.btn2 {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
		}
	}
}
.nogoods {
	margin-top: 196rpx;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
</style>
